<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页音频播放</title>
</head>
<body>
    <div>
        <audio id="audio" src="你是我的眼.mp3" controls preload="metadata"> </audio>
        <button id="play" >播放</button>
        <button id="muted">静音</button>
        <input type="range" name="" id="volBtn" max="1.00" min="0.00" step="0.01" value="0.05" >音量
    </div>
    <div>
        <img src="img/pic_bulboff.gif" alt="灯泡" id="bulb">
        <button id="switch">开</button>
    </div>
    <div>
        <video src="img/9CFD2FFDD83F14B169D9A637F9D3C0D1.mp4" controls style="height: 600px;" preload="metadata"></video>
    </div>

</body>
<script>
    var oAudio = document.getElementById("audio");
    var oPlay =document.getElementById("play");
    var oMuted =document.getElementById("muted");
//播放
    oPlay.addEventListener("click",function(){
        if(oAudio.paused){
             oAudio.play();
             oPlay.innerText="暂停";
        }else{
            oAudio.pause();
            oPlay.innerText="播放";
        }
    },false);
       //静音
       oMuted.addEventListener("click",function(){
         //1  
        //    if(oAudio.muted){
        //     oAudio.muted=false;
        //    }else{
        //     oAudio.muted=true;
        //    }
         //2
        // oAudio.muted = !oAudio.muted
        //3
        oAudio.muted = !oAudio.muted?true:false;

  },false);

  var oBulb = document.getElementById("bulb");
  var oSwitch =document.getElementById("switch");
  var flag = false;
oSwitch.addEventListener("click",function(){
    // if(oBulb.getAttribute("src")=="img/pic_bulboff.gif"){
    //        oBulb.setAttribute("src","img/pic_bulbon.gif");
    // }else{
    //     oBulb.setAttribute("src","img/pic_bulboff.gif");
        
    // }
    // if(!flag){
    //     oBulb.src="img/pic_bulbon.gif";
    //     flag = true;
    //     this.innerText = "关"
    // }else{
    //     oBulb.src="img/pic_bulboff.gif";
    //     flag = false;
    //     this.innerText = "开"
    // }
    if(oBulb.src=="http://127.0.0.1:5500/web1015/img/pic_bulboff.gif"){
        oBulb.src="img/pic_bulbon.gif";
        this.innerText = "关"
    }else{
        oBulb.src="img/pic_bulboff.gif";
        this.innerText = "开"
    }
},false);

var oVolBtn = document.getElementById("volBtn");
oVolBtn.addEventListener("change",function(){
    oAudio.volume = this.value;
},false);
  </script>
</html>